<template>
    <div class="box">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-form-item label="秒杀订单超过:" prop="pass">
                <el-input v-model="ruleForm.flashOrderOvertime">
                    <template #append>分</template>
                </el-input>
                <span class="text">未付款，订单自动关闭</span>
            </el-form-item>
            <el-form-item label="正常订单超过:" prop="pass">
                <el-input v-model="ruleForm.normalOrderOvertime">
                    <template #append>分</template>
                </el-input>
                <span class="text">未付款，订单自动关闭</span>
            </el-form-item>
            <el-form-item label="发货超过:" prop="pass">
                <el-input v-model="ruleForm.confirmOvertime">
                    <template #append>天</template>
                </el-input>
                <span class="text">未收货，订单自动完成</span>
            </el-form-item>
            <el-form-item label="订单完成超过:" prop="pass">
                <el-input v-model="ruleForm.finishOvertime">
                    <template #append>天</template>
                </el-input>
                <span class="text">自动结束交易，不能申请售后</span>
            </el-form-item>
            <el-form-item label="订单完成超过:" prop="pass">
                <el-input v-model="ruleForm.commentOvertime">
                    <template #append>天</template>
                </el-input>
                <span class="text">自动五星好评</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="large" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { user } from '@/api';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    flashOrderOvertime: 0, //1
    normalOrderOvertime: 0, //2
    confirmOvertime: 0, //3
    finishOvertime: 0, //4
    commentOvertime: 0, //5
})

// 请求后台数据渲染页面
user.getOrderSettingApi(1).then((res)=>{
    // console.log(res);
    if(res.code === 200){
        // console.log(res.data);
        ruleForm.flashOrderOvertime = res.data.flashOrderOvertime
        ruleForm.normalOrderOvertime = res.data.normalOrderOvertime
        ruleForm.confirmOvertime = res.data.confirmOvertime
        ruleForm.finishOvertime = res.data.finishOvertime
        ruleForm.commentOvertime = res.data.commentOvertime
    }
})

// 提交按钮
const submit =()=>{
        ElMessageBox.confirm(
        '是否要提交修改',
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '提交成功!',
      })
      // 把修改后的数据传给后台
      user.orderSettingUpdateApi(1,ruleForm).then(()=>{})
    })
    .catch(() => {})
}


</script>


<style lang="less" scoped>
.box{
    width: 650px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 80px auto;
    padding: 50px;
    font-size: 20px;
}
.el-input{
    width: 300px;
    height: 40px;
}
.text{
    margin-left: 20px;
}
.el-form-item{
    font-size: 30px;
}
</style>